import Taro, { useRouter } from '@tarojs/taro'
import { View, Image, Navigator, Text } from '@tarojs/components'
import { useReady } from '@tarojs/taro'
import XNetImage from '../../components/XNetImage'
import { formatTime, hideLoading, showLoading, showModal, showToast } from '../../utils'
import { getVoteApi, voteApi } from '../../services/Vote'
import './index.scss'
import { useState } from 'react'

export default () => {
    const query:any = useRouter().params
    let [voteInfo, setvoteInfo] = useState<any>({})
    let [options, setoptions] = useState<any[]>([])


    async function vote(id:number, index:number) {
        if(voteInfo.voted) return
        showLoading()
        let result = await voteApi(id)
        hideLoading()
        if(result.success) {
            voteInfo.total_score ++
            voteInfo.voted = {
                vote_id : id
            }
            setvoteInfo({...voteInfo})

            options[index].score ++

            setoptions([...options])

            showToast('投票成功')
        }else {
            showModal(result.msg)
        }

    }


    useReady(async () => {
        showLoading()
        let result = await getVoteApi(query.id)
        hideLoading()
        let data = result.data
        data.create_time = formatTime(data.create_time)
        setvoteInfo(data)
        setoptions(data.options)
    })


    return <>
        <View className='p-l-r'>
            <View className='publisher'>
                <Image className='avatar' src='https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3127788250,2174800113&fm=58'></Image>
                <View className='m-l-20'>
                    <View>测试字符串</View>
                    <View className='color-999 f-24 m-t-10'>{voteInfo.create_time}</View>
                </View>
            </View>
            <View className='m-t-30'>
                {voteInfo.vote_type == 3

                ?    <View className='image-grid'>
                    {
                        options.map((option, index) => {
                            return <View className='item' onClick={() => vote(option.id, index)}>
                                <View className='wrap'>
                                    <XNetImage className='option-image'  mode='widthFix' src={option.image}></XNetImage>
                                </View>
                            </View>
                        })
                    }
                    </View>

                
                :   options.map((option, index) => {
                        let className = 'option-row'
                        let rateStyle = ''
                        if(voteInfo.total_score) {
                            rateStyle += ('width:' + option.score / voteInfo.total_score * 100 + '%;')
                        }
                        if(voteInfo.voted && voteInfo.voted.vote_id == option.id) {
                            className += ' selected'
                        }
                        return <View className={className} onClick={() => vote(option.id, index)}>
                            {option.image &&
                                <XNetImage mode='widthFix' className='icon' src={option.image}></XNetImage>
                            }
                            <View className='option-text'>
                                <View className='rate' style={rateStyle}></View>
                                <View className='content'>{option.text}</View>
                                <View className='score middle'>{option.score}</View>
                            </View>
                        </View>
                })

                }
                
            </View>
        </View>
    </>
}